<template>
  <div class="feedbackview" style="color: #1b91b2">
    <el-container>
      <Header class="header"></Header>
      <el-main>
        <el-tabs class="tabs" v-model="activeName" @tab-click="handleClick" style="height: 100%">
          <el-tab-pane label="问题反馈" name="first">
            <div slot="title" class="dialog-footer">
              <div style="font-size:25px;margin: 15px">
                问题反馈
              </div>
              <hr color="#fff">
              <div class="separateline" style="margin: 10px 0">
              </div>
            </div>
            <div style="margin: 15px;">
              <div style="display:flex">
                <div style="width:78px">
                  问题类型:
                </div>
                <div>
                  <el-radio-group v-model="form.type">
                    <el-radio label="1">系统问题</el-radio>
                    <el-radio label="2">内容问题</el-radio>
                    <el-radio label="3">我要吐槽</el-radio>
                  </el-radio-group>
                </div>
              </div>
              <div style="display:flex;margin-top: 30px;">
                <div style="width:78px;">
                  标&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;题:
                </div>
                <div style="flex-grow: 1">
                  <el-input type="text" v-model="form.title" style="width:100%" :rows="2" placeholder="请输入标题">
                  </el-input>
                </div>
              </div>
              <div style="display:flex;margin-top: 30px;">
                <div style="width:78px;">
                  描&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;述:
                </div>
                <div style="flex-grow: 1">
                  <el-input type="textarea" v-model="form.feedbackContent" style="width:100%" :rows="7"
                            placeholder="请输入内容">
                  </el-input>
                </div>
              </div>
              <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="$router.push('/')">我在想想</el-button>
                <el-button type="primary" size="small" @click="confirmFeedback">确定反馈</el-button>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="我的反馈" name="second" style="margin: 15px;height: 90%">
            <div style="margin-bottom: 10px">
              <el-input v-model="listQuery.title" placeholder="请输入标题"
                        style="width: 180px;margin-right: 5px;margin-left: 5px"
                        class="filter-item"
              />
              <el-input v-model="listQuery.content" placeholder="请输入内容"
                        style="width: 180px;margin-right: 5px;margin-left: 5px"
                        class="filter-item"
              />
              <el-select @clear="clearStatus" v-model="selectedStatusName" placeholder="反馈状态" clearable
                         class="filter-item"
                         style="margin-right: 5px;width: 100px">
                <el-option @click.native="selectStatus(item.status)" v-for="item in statusList"
                           :key="item.status"
                           :value="item.name"
                />
              </el-select>
              <el-select @clear="clearType" v-model="selectedTypeName" placeholder="反馈类型" clearable
                         class="filter-item"
                         style="margin-right: 5px;width: 110px">
                <el-option @click.native="selectType(item.type)" v-for="item in typeList"
                           :key="item.type"
                           :value="item.name"
                />
              </el-select>
              <el-button class="filter-item" type="primary" icon="el-icon-search" @click="searchMyFeedback"
                         style="margin-bottom: 5px;"
              >
                查找
              </el-button>
              <el-button class="filter-item" type="success" icon="el-icon-refresh" @click="resetCondition"
                         style="margin-bottom: 5px;margin-left: 10px"
              >
                重置
              </el-button>
            </div>
            <el-table
                ref="multipleTable"
                :data="tableData"
                style="width: 100%"
                @selection-change="handleSelectionChange"
            >
              <el-table-column
                  prop="title"
                  label="标题"
                  min-width="120"
              >
              </el-table-column>
              <el-table-column
                  prop="status"
                  label="反馈状态"
                  max-width="110"
              >
                <template v-slot="scope">
                  <el-tag v-if="scope.row.status === 1" type="success">已开启</el-tag>
                  <el-tag v-if="scope.row.status === 2" type="">已完成</el-tag>
                  <el-tag v-if="scope.row.status === 3" type="danger">已拒绝</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                  prop="type"
                  label="反馈类型"
                  max-width="110"
              >
                <template v-slot="scope">
                  <el-tag v-if="scope.row.type === 1" effect="plain" type="">系统问题</el-tag>
                  <el-tag v-if="scope.row.type === 2" effect="plain" type="warning">内容问题</el-tag>
                  <el-tag v-if="scope.row.type === 3" effect="plain" type="danger">我要吐槽</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                  prop="feedbackContent"
                  label="反馈内容"
                  min-width="180"
              >
              </el-table-column>
              <el-table-column
                  prop="replyContent"
                  label="回复"
                  min-width="180"
              >
              </el-table-column>
              <el-table-column
                  prop="createTime"
                  label="反馈时间"
                  width="165"
              >
              </el-table-column>
              <el-table-column
                  fixed="right"
                  label="操作"
                  min-width="160"
              >
                <template slot-scope="scope">
                  <el-popconfirm
                      @onConfirm="deleteFeedback(scope.$index, scope.row)"
                      title="确定要删除该反馈吗？"
                  >
                    <el-button slot="reference"
                               size="mini"
                               type="danger"
                    >删除
                    </el-button>
                  </el-popconfirm>

                  <el-button style="margin-left: 10px"
                             size="mini"
                             type="primary"
                             @click="queryMyFeedbackDetail(scope.$index, scope.row)"
                  >详情
                  </el-button>
                </template>
              </el-table-column>
            </el-table>

            <!--  反馈详情  -->
            <el-dialog title="反馈详情" :visible.sync="showMyFeedbackDialog"
                       @close="showMyFeedbackDialog=false"
                       :append-to-body="true">
              <el-form>
                <el-form-item label="标题：" :label-width="formLabelWidth">
                  <span>{{ feedbackDetail.title }}</span>
                </el-form-item>
                <el-form-item label="反馈时间：" :label-width="formLabelWidth">
                  <span>{{ feedbackDetail.createTime }}</span>
                </el-form-item>
                <el-form-item label="反馈内容：" :label-width="formLabelWidth">
                  <span>{{ feedbackDetail.feedbackContent }}</span>
                </el-form-item>
                <el-form-item label="反馈状态：" :label-width="formLabelWidth">
                  <el-tag v-if="feedbackDetail.status === 1" type="success">已开启</el-tag>
                  <el-tag v-if="feedbackDetail.status === 2" type="">已完成</el-tag>
                  <el-tag v-if="feedbackDetail.status === 3" type="danger">已拒绝</el-tag>
                </el-form-item>
                <el-form-item label="反馈类型：" :label-width="formLabelWidth">
                  <el-tag v-if="feedbackDetail.type === 1" effect="plain" type="">系统问题</el-tag>
                  <el-tag v-if="feedbackDetail.type === 2" effect="plain" type="warning">内容问题</el-tag>
                  <el-tag v-if="feedbackDetail.type === 3" effect="plain" type="danger">我要吐槽</el-tag>
                </el-form-item>
                <el-form-item>
                  <hr>
                </el-form-item>
                <el-form-item label="回复人：" :label-width="formLabelWidth">
                  <span>{{ feedbackDetail.updateName }}</span>
                </el-form-item>
                <el-form-item label="回复时间：" :label-width="formLabelWidth">
                  <span>{{ feedbackDetail.updateTime }}</span>
                </el-form-item>
                <el-form-item label="回复内容：" :label-width="formLabelWidth">
                  <span>{{ feedbackDetail.replyContent }}</span>
                </el-form-item>
              </el-form>
            </el-dialog>

            <!--  分页  -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="listQuery.pageNum"
                :page-size="listQuery.pageSize"
                layout="prev, pager, next, total, jumper"
                :total="total"
            >
            </el-pagination>
          </el-tab-pane>
        </el-tabs>
      </el-main>
      <el-footer>
<!--        <Footer class="fixFooter"></Footer>-->
      </el-footer>
    </el-container>


  </div>
</template>

<script>

import Header from "@/components/Header.vue";
import Footer from "@/components/Footer.vue";
import {addFeedback, queryFeedbackStatus, queryFeedbackType, queryMyFeedbackPage} from "@/api/feedback";
import {hideFullScreenLoading, showFullScreenLoading} from "../../utils/loading";

export default {
  components: {Footer, Header},
  data() {
    return {
      activeName: 'first',
      form: {
        feedbackContent: '',
        type: -1,
        title: ''
      },
      selectedStatusName: '',
      selectedTypeName: '',
      statusList: [],
      typeList: [],
      showMyFeedbackDialog: false,
      formLabelWidth: '90px',
      feedbackDetail: {},
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        userName: '',
        status: -1,
        type: -1,
        title: '',
        content: '',
        createName: ''
      },
      tableData: [],
      total: 0,
    }
  },
  created() {
    let userInfo = JSON.parse(localStorage.getItem("userInfo"));
    if (userInfo === null) {
      this.$message.warning('未登录')
      this.$router.push('/')
    }
    showFullScreenLoading()
    this.listQuery.userName = userInfo.userName;
    this.getInitFeedbackStatusList()
    this.getInitFeedbackTypeList()
    this.getList();
    hideFullScreenLoading()
  },
  methods: {
    searchMyFeedback() {
      this.getList();
    },
    resetCondition() {
      this.listQuery.status = '';
      this.listQuery.type = '';
      this.listQuery.title = '';
      this.listQuery.content = '';
      this.listQuery.createName = '';
      this.selectedStatusName = '';
      this.selectedTypeName = '';
      this.getList();
    },
    getInitFeedbackStatusList() {
      queryFeedbackStatus().then(res => {
        if (res.code === 200) {
          this.statusList = res.data;
        }
      })
    },
    getInitFeedbackTypeList() {
      queryFeedbackType().then(res => {
        if (res.code === 200) {
          this.typeList = res.data;
        }
      })
    },
    selectStatus(status) {
      this.listQuery.status = status;
    },
    selectType(type) {
      this.listQuery.type = type;
    },
    deleteFeedback(index, row) {

    },
    queryMyFeedbackDetail(index, row) {
      this.showMyFeedbackDialog = true;
      this.feedbackDetail = row;
      if (row.status !== 2) {
        this.feedbackDetail.updateTime = '';
        this.feedbackDetail.updateName = '';
        this.feedbackDetail.replyContent = '';
      }
    },
    async getList() {
      showFullScreenLoading()
      await queryMyFeedbackPage(this.listQuery).then(res => {
        this.tableData = res.data.rows
        this.total = parseInt(res.data.total)
        hideFullScreenLoading()
      }).catch(() => {
        hideFullScreenLoading()
      })
    },
    handleClick() {

    },
    async confirmFeedback() {
      if (this.form.type === -1) {
        this.$message.info('请选择问题类型')
        return;
      }
      if (this.form.title === '') {
        this.$message.info('请输入标题')
        return;
      }
      if (this.form.feedbackContent === '') {
        this.$message.info('请输入内容')
        return;
      }
      await addFeedback(this.form).then(res => {
        console.log(res)
        if (res.code === 200) {
          this.$message.success('反馈成功');
          this.$router.push('/')
        }
      })
    },
    handleSizeChange(pageSize) {
      this.listQuery.pageSize = pageSize
      this.getList()
    },
    handleCurrentChange(pageNum) {
      this.listQuery.pageNum = pageNum
      this.getList()
    },
    handleSelectionChange(val) {
      this.selectedRowIds = this.$refs.multipleTable.selection.map((item) => item.id)
      this.selectedRows = val
    },
    clearStatus() {
      this.listQuery.status = '';
    },
    clearType() {
      this.listQuery.type = '';
    },
  }
}
</script>
<style scoped>
.tabs {
  margin-top: 10px;
  margin-left: 20px;
}

.fixFooter {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

.feedbackview {
  position: fixed;
  background-color: #c6e2f5;
  width: 100%;
  height: 100%;
}

.header, .fixFooter {
//background-color: #529be3; background-color: #e41b14;
}

.dialog-footer {
  margin: 15px;
}
</style>